الگوهای Ref Forwarding در React: تسلط بر طراحی API کامپوننت

فوروارد کردن Ref (Ref forwarding) یک تکنیک قدرتمند در React است که به شما امکان می‌دهد تا به طور خودکار یک ref را از طریق یک کامپوننت به یکی از فرزندان آن منتقل کنید. این به کامپوننت‌های والد امکان می‌دهد تا مستقیماً با عناصر DOM خاص یا نمونه‌های کامپوننت در فرزندان خود تعامل داشته باشند، حتی اگر آن فرزندان به صورت عمیق تودرتو باشند. درک و استفاده مؤثر از ref forwarding برای ساخت APIهای کامپوننت انعطاف‌پذیر، قابل استفاده مجدد و قابل نگهداری بسیار حیاتی است.

چرا Ref Forwarding برای طراحی API کامپوننت اهمیت دارد

هنگام طراحی کامپوننت‌های React، به خصوص آن‌هایی که برای استفاده مجدد در نظر گرفته شده‌اند، مهم است که نحوه تعامل سایر توسعه‌دهندگان با آن‌ها را در نظر بگیرید. یک API کامپوننت خوب طراحی شده:

• شهودی: درک و استفاده از آن آسان است.
• انعطاف‌پذیر: بدون نیاز به تغییرات قابل توجه، با موارد استفاده مختلف سازگار است.
• قابل نگهداری: تغییرات در پیاده‌سازی داخلی یک کامپوننت نباید کدهای خارجی را که از آن استفاده می‌کنند، دچار مشکل کند.

Ref forwarding نقش کلیدی در دستیابی به این اهداف ایفا می‌کند. این تکنیک به شما امکان می‌دهد تا بخش‌های خاصی از ساختار داخلی کامپوننت خود را در معرض دنیای خارج قرار دهید، در حالی که همچنان کنترل پیاده‌سازی داخلی کامپوننت را حفظ می‌کنید.

مبانی React.forwardRef

هسته اصلی ref forwarding در React، کامپوننت مرتبه بالاتر (HOC) React.forwardRef است. این تابع یک تابع رندرکننده را به عنوان آرگومان دریافت می‌کند و یک کامپوننت React جدید را برمی‌گرداند که می‌تواند یک پراپ ref دریافت کند.

در اینجا یک مثال ساده آورده شده است:

            import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

export default MyInput;

            

              
                Copy
              
            
          

در این مثال، MyInput یک کامپوننت تابعی است که از forwardRef استفاده می‌کند. پراپ ref که به MyInput ارسال می‌شود، مستقیماً به عنصر input اختصاص داده می‌شود. این به کامپوننت والد اجازه می‌دهد تا یک ارجاع به گره واقعی DOM فیلد ورودی به دست آورد.

استفاده از Ref فوروارد شده

در اینجا نحوه استفاده از کامپوننت MyInput در یک کامپوننت والد آورده شده است:

            import React, { useRef, useEffect } from 'react';
import MyInput from './MyInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    

      
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

در این مثال، ParentComponent با استفاده از useRef یک ref ایجاد کرده و آن را به کامپوننت MyInput ارسال می‌کند. سپس هوک useEffect از این ref برای فوکوس کردن روی فیلد ورودی هنگام mount شدن کامپوننت استفاده می‌کند. این نشان می‌دهد که چگونه یک کامپوننت والد می‌تواند با استفاده از ref forwarding، عنصر DOM درون کامپوننت فرزند خود را مستقیماً دستکاری کند.

الگوهای رایج Ref Forwarding برای طراحی API کامپوننت

اکنون، بیایید برخی از الگوهای رایج و مفید ref forwarding را که می‌توانند به طور قابل توجهی طراحی API کامپوننت شما را بهبود بخشند، بررسی کنیم.

۱. فوروارد کردن Refها به عناصر DOM

همانطور که در مثال پایه بالا نشان داده شد، فوروارد کردن refها به عناصر DOM یک الگوی اساسی است. این به کامپوننت‌های والد اجازه می‌دهد تا به گره‌های DOM خاصی در کامپوننت شما دسترسی پیدا کرده و آن‌ها را دستکاری کنند. این به ویژه برای موارد زیر مفید است:

• مدیریت فوکوس: تنظیم فوکوس روی یک فیلد ورودی یا سایر عناصر تعاملی.
• اندازه‌گیری ابعاد عنصر: به دست آوردن عرض یا ارتفاع یک عنصر.
• دسترسی به ویژگی‌های عنصر: خواندن یا تغییر خصوصیات عنصر.

مثال: یک کامپوننت دکمه قابل سفارشی‌سازی

یک کامپوننت دکمه را در نظر بگیرید که به کاربران اجازه می‌دهد ظاهر آن را سفارشی‌سازی کنند.

            import React, { forwardRef } from 'react';

const CustomButton = forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return (
    
      {children}
    
  );
});

export default CustomButton;

            

              
                Copy
              
            
          

اکنون یک کامپوننت والد می‌تواند یک ارجاع به عنصر دکمه دریافت کند و اقداماتی مانند کلیک کردن برنامه‌ریزی شده روی آن یا تغییر استایل آن را انجام دهد.

۲. فوروارد کردن Refها به کامپوننت‌های فرزند

Ref forwarding فقط به عناصر DOM محدود نمی‌شود. شما می‌توانید refها را به کامپوننت‌های دیگر React نیز فوروارد کنید. این به کامپوننت‌های والد اجازه می‌دهد تا به متدها یا ویژگی‌های نمونه کامپوننت‌های فرزند دسترسی پیدا کنند.

مثال: یک کامپوننت ورودی کنترل شده

تصور کنید یک کامپوننت ورودی سفارشی دارید که وضعیت خود را مدیریت می‌کند. شاید بخواهید متدی را برای پاک کردن برنامه‌ریزی شده مقدار ورودی در معرض دید قرار دهید.

            import React, { useState, forwardRef, useImperativeHandle } from 'react';

const ControlledInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  const clearInput = () => {
    setValue('');
  };

  useImperativeHandle(ref, () => ({
    clear: clearInput,
  }));

  return (
     setValue(e.target.value)}
    />
  );
});

export default ControlledInput;

            

              
                Copy
              
            
          

در این مثال، از useImperativeHandle برای در معرض قرار دادن متد clear به کامپوننت والد استفاده می‌شود. سپس والد می‌تواند این متد را برای پاک کردن مقدار ورودی فراخوانی کند.

            import React, { useRef } from 'react';
import ControlledInput from './ControlledInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClearClick = () => {
    if (inputRef.current) {
      inputRef.current.clear();
    }
  };

  return (
    

      
      Clear
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

این الگو زمانی مفید است که نیاز دارید عملکرد خاصی از یک کامپوننت فرزند را برای والد آن در معرض دید قرار دهید، در حالی که همچنان کنترل وضعیت داخلی فرزند را حفظ می‌کنید.

۳. ترکیب Refها برای کامپوننت‌های پیچیده

در کامپوننت‌های پیچیده‌تر، ممکن است نیاز داشته باشید چندین ref را به عناصر یا کامپوننت‌های مختلف درون کامپوننت خود فوروارد کنید. این کار را می‌توان با ترکیب refها با استفاده از یک تابع سفارشی انجام داد.

مثال: یک کامپوننت ترکیبی با چندین عنصر قابل فوکوس

فرض کنید کامپوننتی دارید که هم شامل یک فیلد ورودی و هم یک دکمه است. شما می‌خواهید به کامپوننت والد اجازه دهید تا روی فیلد ورودی یا دکمه فوکوس کند.

            import React, { useRef, forwardRef, useEffect } from 'react';

const CompositeComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    if (typeof ref === 'function') {
      ref({
        input: inputRef.current,
        button: buttonRef.current,
      });
    } else if (ref && typeof ref === 'object') {
      ref.current = {
        input: inputRef.current,
        button: buttonRef.current,
      };
    }
  }, [ref]);

  return (
    

      
      Click Me
    
  );
});

export default CompositeComponent;

            

              
                Copy
              
            
          

در این مثال، CompositeComponent از دو ref داخلی، inputRef و buttonRef استفاده می‌کند. سپس هوک useEffect این refها را در یک شیء واحد ترکیب کرده و آن را به ref فوروارد شده اختصاص می‌دهد. این به کامپوننت والد اجازه می‌دهد تا هم به فیلد ورودی و هم به دکمه دسترسی داشته باشد.

            import React, { useRef } from 'react';
import CompositeComponent from './CompositeComponent';

const ParentComponent = () => {
  const compositeRef = useRef(null);

  const handleFocusInput = () => {
    if (compositeRef.current && compositeRef.current.input) {
      compositeRef.current.input.focus();
    }
  };

  const handleFocusButton = () => {
    if (compositeRef.current && compositeRef.current.button) {
      compositeRef.current.button.focus();
    }
  };

  return (
    

      
      Focus Input
      Focus Button
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

این الگو زمانی مفید است که نیاز دارید چندین عنصر یا کامپوننت را در یک کامپوننت پیچیده برای کامپوننت والد در معرض دید قرار دهید.

۴. فوروارد کردن شرطی Ref

گاهی اوقات، ممکن است فقط بخواهید یک ref را تحت شرایط خاصی فوروارد کنید. این می‌تواند زمانی مفید باشد که می‌خواهید یک رفتار پیش‌فرض ارائه دهید اما به کامپوننت والد اجازه دهید آن را لغو کند.

مثال: کامپوننتی با یک فیلد ورودی اختیاری

فرض کنید کامپوننتی دارید که یک فیلد ورودی را فقط در صورت تنظیم یک پراپ خاص رندر می‌کند. شما فقط می‌خواهید ref را در صورتی فوروارد کنید که فیلد ورودی واقعاً رندر شده باشد.

            import React, { forwardRef } from 'react';

const ConditionalInput = forwardRef((props, ref) => {
  const { showInput, ...rest } = props;

  if (showInput) {
    return ;
  } else {
    return 
No input field
;
  }
});

export default ConditionalInput;

            

              
                Copy
              
            
          

در این مثال، ref فقط در صورتی به عنصر input فوروارد می‌شود که پراپ showInput برابر با true باشد. در غیر این صورت، ref نادیده گرفته می‌شود.

۵. فوروارد کردن Ref با کامپوننت‌های مرتبه بالاتر (HOCs)

هنگام استفاده از کامپوننت‌های مرتبه بالاتر (HOCs)، مهم است که اطمینان حاصل کنید refها به درستی به کامپوننت پیچیده شده (wrapped) فوروارد می‌شوند. اگر refها را به درستی مدیریت نکنید، ممکن است کامپوننت والد نتواند به کامپوننت زیرین دسترسی پیدا کند.

مثال: یک HOC ساده برای افزودن حاشیه

            import React, { forwardRef } from 'react';

const withBorder = (WrappedComponent) => {
  const WithBorder = forwardRef((props, ref) => {
    return (
      

        
      
    );
  });

  WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithBorder;
};

export default withBorder;

            

              
                Copy
              
            
          

در این مثال، HOC withBorder از forwardRef استفاده می‌کند تا اطمینان حاصل شود که ref به کامپوننت پیچیده شده ارسال می‌شود. ویژگی displayName نیز برای آسان‌تر کردن دیباگینگ تنظیم شده است.

نکته مهم: هنگام استفاده از کامپوننت‌های کلاسی با HOCها و ref forwarding، ref به عنوان یک پراپ معمولی به کامپوننت کلاسی ارسال می‌شود. شما باید با استفاده از this.props.ref به آن دسترسی پیدا کنید.

بهترین شیوه‌ها برای Ref Forwarding

برای اطمینان از اینکه از ref forwarding به طور مؤثر استفاده می‌کنید، بهترین شیوه‌های زیر را در نظر بگیرید:

• از React.forwardRef برای کامپوننت‌هایی که نیاز به فوروارد کردن ref دارند استفاده کنید. این روش استاندارد برای فعال کردن ref forwarding در React است.
• API کامپوننت خود را به وضوح مستند کنید. توضیح دهید که کدام عناصر یا کامپوننت‌ها از طریق ref قابل دسترسی هستند و چگونه از آن‌ها استفاده کنید.
• مراقب عملکرد باشید. از فوروارد کردن غیرضروری ref خودداری کنید، زیرا می‌تواند سربار ایجاد کند.
• از useImperativeHandle برای در معرض قرار دادن مجموعه محدودی از متدها یا ویژگی‌ها استفاده کنید. این به شما امکان می‌دهد آنچه را که کامپوننت والد می‌تواند به آن دسترسی داشته باشد، کنترل کنید.
• از استفاده بیش از حد از ref forwarding خودداری کنید. در بسیاری از موارد، بهتر است از پراپ‌ها برای ارتباط بین کامپوننت‌ها استفاده کنید.

ملاحظات دسترسی‌پذیری

هنگام استفاده از ref forwarding، مهم است که دسترسی‌پذیری را در نظر بگیرید. اطمینان حاصل کنید که کامپوننت‌های شما همچنان برای کاربران دارای معلولیت قابل دسترسی هستند، حتی زمانی که از refها برای دستکاری عناصر DOM استفاده می‌شود. در اینجا چند نکته آورده شده است:

• از атрибуت‌های ARIA برای ارائه اطلاعات معنایی استفاده کنید. این به فناوری‌های کمکی کمک می‌کند تا هدف کامپوننت‌های شما را درک کنند.
• فوکوس را به درستی مدیریت کنید. اطمینان حاصل کنید که فوکوس همیشه قابل مشاهده و قابل پیش‌بینی است.
• کامپوننت‌های خود را با فناوری‌های کمکی آزمایش کنید. این بهترین راه برای شناسایی و رفع مشکلات دسترسی‌پذیری است.

بین‌المللی‌سازی و محلی‌سازی

هنگام طراحی APIهای کامپوننت برای مخاطبان جهانی، بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n) را در نظر بگیرید. اطمینان حاصل کنید که کامپوننت‌های شما به راحتی می‌توانند به زبان‌های مختلف ترجمه شوند و با زمینه‌های فرهنگی مختلف سازگار شوند. در اینجا چند نکته آورده شده است:

• از یک کتابخانه برای i18n و l10n استفاده کنید. کتابخانه‌های عالی زیادی مانند react-intl و i18next در دسترس هستند.
• تمام متن‌ها را خارجی‌سازی کنید. رشته‌های متنی را در کامپوننت‌های خود هاردکد نکنید.
• از فرمت‌های مختلف تاریخ و عدد پشتیبانی کنید. کامپوننت‌های خود را با محلی (locale) کاربر تطبیق دهید.
• چیدمان‌های راست به چپ (RTL) را در نظر بگیرید. برخی از زبان‌ها، مانند عربی و عبری، از راست به چپ نوشته می‌شوند.

نمونه‌هایی از سراسر جهان

بیایید به چند نمونه از نحوه استفاده از ref forwarding در زمینه‌های مختلف در سراسر جهان نگاهی بیندازیم:

• در اپلیکیشن‌های تجارت الکترونیک: می‌توان از ref forwarding برای فوکوس روی فیلد ورودی جستجو هنگام رفتن کاربر به صفحه جستجو استفاده کرد، که تجربه کاربری را برای خریداران در سطح جهانی بهبود می‌بخشد.
• در کتابخانه‌های تجسم داده: می‌توان از ref forwarding برای دسترسی به عناصر DOM زیرین نمودارها و گراف‌ها استفاده کرد، که به توسعه‌دهندگان اجازه می‌دهد ظاهر و رفتار آن‌ها را بر اساس استانداردهای داده‌های منطقه‌ای سفارشی کنند.
• در کتابخانه‌های فرم: می‌توان از ref forwarding برای ارائه کنترل برنامه‌ریزی شده بر روی فیلدهای ورودی، مانند پاک کردن یا اعتبارسنجی آن‌ها استفاده کرد، که به ویژه در اپلیکیشن‌هایی که باید با مقررات مختلف حریم خصوصی داده‌ها در کشورهای مختلف مطابقت داشته باشند، مفید است.

نتیجه‌گیری

Ref forwarding یک ابزار قدرتمند برای طراحی APIهای کامپوننت React انعطاف‌پذیر و قابل نگهداری است. با درک و استفاده از الگوهای مورد بحث در این مقاله، می‌توانید کامپوننت‌هایی ایجاد کنید که استفاده از آن‌ها آسان، با موارد استفاده مختلف سازگار و در برابر تغییرات مقاوم باشند. به یاد داشته باشید که هنگام طراحی کامپوننت‌های خود، دسترسی‌پذیری و بین‌المللی‌سازی را در نظر بگیرید تا اطمینان حاصل شود که برای مخاطبان جهانی قابل استفاده هستند.

با تسلط بر ref forwarding و سایر تکنیک‌های پیشرفته React، می‌توانید به یک توسعه‌دهنده React مؤثرتر و ارزشمندتر تبدیل شوید. به کاوش، آزمایش و اصلاح مهارت‌های خود ادامه دهید تا رابط‌های کاربری شگفت‌انگیزی بسازید که کاربران را در سراسر جهان به وجد می‌آورد.